<template>
	<div class="centermap">
		<div class="mapwrap">
			<div
				id="CenterMap"
				ref="CenterMap"
				style="height: 100%; width: 100%"
			></div>
			<div class="modelMap" v-show="isIN">
				<div style="height: 30px; padding-left: 30px; line-height: 30px">
					{{ inData.cname }}
					<i class="el-icon-close" @click="isIN = false"></i>
					<!-- <img src="./../../assets/img/Frame2.png" alt="" style="width: 370px;height: 30px;"> -->
				</div>
				<div class="modelMapCOn">
					<div class="flex" style="align-items: center">
						<div style="width: 115px; height: 140px">
							<div style="margin: 30px 9px 0 20px">
								<p>电站额定容量</p>
								<p style="color: #1df2ff">{{ inData.capNom }}MWh</p>
								<p>全站SOC</p>
								<p style="color: #1df2ff">{{ inData.soc }}%</p>
							</div>
						</div>
						<div style="width: 133px; height: 140px">
							<img
								src="./../../assets/img/Group_1000002343.png"
								alt=""
								style="width: 133px; height: 92px; margin: 24px auto"
							/>
						</div>
						<div style="width: 115px; height: 140px">
							<div style="margin: 30px 9px 0 20px">
								<p>额定功率</p>
								<p style="color: #1df2ff">{{ inData.pNom }}MW</p>
								<p>实时功率</p>
								<p style="color: #1df2ff">{{ inData.p }}MW</p>
							</div>
						</div>
					</div>
					<div class="dian">
						<p>
							<i class="el-icon-position"></i>
							{{ inData.address }}
						</p>
						<!-- <p>
              <i class="el-icon-time"></i>
              {{inData.address}}
            </p> -->
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getJWD } from '@/api/modules/home.js'
import * as echarts from 'echarts'
import { GETNOBASE } from 'api'
import redImage from './../../assets/img/01.svg'

export default {
	props: ['sjlist'],
	data() {
		return {
			options: {},
			isIN: false,
			inData: {},
			code: 'china', //china 代表中国 其他地市是行政编码
			echartBindClick: false,
			isSouthChinaSea: false, //是否要展示南海群岛  修改此值请刷新页面
		}
	},

	mounted() {
		this.getData('china')
	},
	methods: {
		getData(code) {
			getJWD({ id: this.$store.state.oldUserInfo.companyId }).then((res) => {
				if (res.code == 200) {
					let data = res.data
					let regionCode = []
					let dataList = []
					for (let index = 0; index < data.length; index++) {
						let element = data[index]
						regionCode.push({ name: element.cname, value: element.p })
						dataList.push({
							name: element.cname,
							value: [element.longitude, element.latitude, element.p],
							datavalue: element,
						})
					}
					this.getGeojson(code, regionCode, dataList)
				}
			})
		},
		/**
		 * @description: 获取geojson
		 * @param {*} name china 表示中国 其他省份行政区编码
		 * @param {*} mydata 接口返回列表数据
		 * @return {*}
		 */
		async getGeojson(name, mydata, newData) {
			this.code = name
			//如果要展示南海群岛并且展示的是中国的话
			let geoname = name
			if (this.isSouthChinaSea && name == 'china') {
				geoname = 'chinaNanhai'
			}
			//如果有注册地图的话就不用再注册 了
			let mapjson = echarts.getMap(name)
			if (mapjson) {
				mapjson = mapjson.geoJSON
			} else {
				mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then(
					(res) => {
						return res
					}
				)
				echarts.registerMap(name, mapjson)
			}

			this.init(name, mydata, newData)
		},
		init(name, data, data2) {
			let self = this
			let myChart = echarts.init(this.$refs.CenterMap, null, {
				renderer: 'svg',
			})
			let top = 45
			let zoom = 1.05
			let option = {
				backgroundColor: 'rgba(0,0,0,0)',
				tooltip: {
					show: false,
				},
				legend: {
					show: false,
				},
				visualMap: {
					show: false,
					left: 20,
					bottom: 20,
					pieces: [
						{ gte: 1000, label: '1000个以上' }, // 不指定 max，表示 max 为无限大（Infinity）。
						{ gte: 600, lte: 999, label: '600-999个' },
						{ gte: 200, lte: 599, label: '200-599个' },
						{ gte: 50, lte: 199, label: '49-199个' },
						{ gte: 10, lte: 49, label: '10-49个' },
						{ lte: 9, label: '1-9个' }, // 不指定 min，表示 min 为无限大（-Infinity）。
					],
					inRange: {
						// 渐变颜色，从小到大
						color: [
							'#c3d7df',
							'#5cb3cc',
							'#8abcd1',
							'#66a9c9',
							'#2f90b9',
							'#1781b5',
						],
					},
					textStyle: {
						color: '#fff',
					},
				},
				geo: {
					map: name,
					roam: false,
					selectedMode: false, //是否允许选中多个区域
					zoom: zoom,
					top: top,
					// aspectScale: 0.78,
					show: false,
				},
				series: [
					{
						name: 'MAP',
						type: 'map',
						map: name,
						// aspectScale: 0.78,
						data: data,
						// data: [1,100],
						selectedMode: false, //是否允许选中多个区域
						zoom: zoom,
						geoIndex: 1,
						top: top,
						tooltip: {
							show: true,
							formatter: function (params) {
								if (params.data) {
									return params.name + '：' + params.data['value']
								} else {
									return params.name
								}
							},
							backgroundColor: 'rgba(0,0,0,.6)',
							borderColor: 'rgba(147, 235, 248, .8)',
							textStyle: {
								color: '#FFF',
							},
						},
						label: {
							show: false,
							color: '#000',
							// position: [-10, 0],
							formatter: function (val) {
								// console.log(val)
								if (val.data !== undefined) {
									return val.name.slice(0, 2)
								} else {
									return ''
								}
							},
							rich: {},
						},
						emphasis: {
							label: {
								show: false,
							},
							itemStyle: {
								areaColor: '#389BB7',
								borderWidth: 1,
							},
						},
						itemStyle: {
							borderColor: 'rgba(147, 235, 248, .8)',
							borderWidth: 1,
							areaColor: {
								type: 'radial',
								x: 0.5,
								y: 0.5,
								r: 0.8,
								colorStops: [
									{
										offset: 0,
										color: 'rgba(147, 235, 248, 0)', // 0% 处的颜色
									},
									{
										offset: 1,
										color: 'rgba(147, 235, 248, .2)', // 100% 处的颜色
									},
								],
								globalCoord: false, // 缺为 false
							},
							shadowColor: 'rgba(128, 217, 248, .3)',
							shadowOffsetX: -2,
							shadowOffsetY: 2,
							shadowBlur: 10,
						},
					},
					{
						data: data2,
						name: 'dwxx',
						type: 'scatter',
						click: function (params) {
							// 调用自定义弹窗函数
							console.log(params)
						},
						symbol: `image://${redImage}`,
						symbolSize: 60,
						coordinateSystem: 'geo',
						legendHoverLink: true,
						animation: true,
						showEffectOn: 'render',
						rippleEffect: {
							// period: 4,
							scale: 6,
							color: 'rgba(255,255,255, 1)',
							brushType: 'fill',
						},
						tooltip: {
							show: true,
							formatter: function (params) {
								if (params.data) {
									return (
										params.name + '实时功率：' + params.data['value'][2] + 'MW'
									)
								} else {
									return params.name
								}
							},
							backgroundColor: 'rgba(0,0,0,.6)',
							borderColor: 'rgba(147, 235, 248, .8)',
							textStyle: {
								color: '#FFF',
							},
						},
						label: {
							formatter: (param) => {
								return param.name.slice(0, 2)
							},

							fontSize: 11,
							offset: [0, -10],
							position: 'bottom',
							textBorderColor: '#fff',
							textShadowColor: '#000',
							textShadowBlur: 10,
							textBorderWidth: 0,
							color: '#FFF',
							show: true,
						},
						// colorBy: "data",
						itemStyle: {
							color: 'rgba(255,255,255,1)',
							borderColor: 'rgba(2255,255,255,2)',
							borderWidth: 2,
							shadowColor: '#000',
							shadowBlur: 10,
						},
					},
				],

				//动画效果
				// animationDuration: 1000,
				// animationEasing: 'linear',
				// animationDurationUpdate: 1000
			}
			myChart.setOption(option)
			myChart.on('click', function (params) {
				var seriesName = params.seriesName
				var seriesIndex = params.seriesIndex
				if (seriesName === 'dwxx' || seriesIndex === 1) {
					console.log('点击了系列1')
					// 系列1的点击事件处理
					self.isIN = true
					self.inData = params.data.datavalue
				} else {
					self.isIN = false
					self.inData = {}
				}
			})
			window.addEventListener('resize', function () {
				myChart.resize()
			})
			// this.options = option;
		},
		message(text) {
			this.$Message({
				text: text,
				type: 'warning',
			})
		},
	},
}
</script>
<style lang="scss" scoped>
.centermap {
	margin-bottom: 20px;
	height: 100%;

	.mapwrap {
		height: 100%;
		width: 100%;
		// padding: 0 0 10px 0;
		box-sizing: border-box;
		position: relative;
	}

	.modelMap {
		width: 371px;
		height: 258px;
		position: absolute;
		right: 0;
		bottom: 0;
		background-image: url(././../../assets/img/1111.png);
		background-size: cover;
		background-repeat: no-repeat;
		.el-icon-close {
			position: absolute;
			right: 0;
			top: 2px;
			font-size: 15px;
			cursor: pointer;
		}
	}

	.modelMapCOn {
		/* background-color: #0C4088; */
		height: 224px;
		margin-top: 3px;

		p {
			height: 30px;
			font-weight: 400;
			font-size: 13px;
			color: #ffffff;
			line-height: 15px;
			text-align: left;
		}

		.dian {
			width: 346px;
			height: 67px;
			margin: 5px auto;
			background-color: #106fef;
			p {
				line-height: 30px;
				padding: 0 10px;
			}
		}
	}
}
</style>
